<!DOCTYPE HTML>
<html>
<body>
<head>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var context=c.getContext("2d");
    // 开始绘制矩形。
    context.fillStyle="#ff00ff";
    context.strokeStyle="blue";
    context.fillRect(20,20,100,100);
    context.strokeRect(20,20,100,100);
    context.fill();
    context.stroke();
    // 保存当前Canvas状态。
    context.save();
    //绘制另外一个矩形。    
    context.fillStyle="#ff0000";
    context.strokeStyle="green";
    context.fillRect(140,20,100,100);
    context.strokeRect(140,20,100,100);
    context.fill();
    context.stroke();
    // 恢复第一个矩形的状态。
    context.restore();
    // 绘制两个矩形。
    context.fillRect(20,140,50,50);
    context.strokeRect(80,140,50,50);
</script>
</body>
</html>



